<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-date-picker disabled :type="type" :placeholder="placeholder" size="default"></el-date-picker>
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-date-picker v-model="_value" :value-format="format" :format="format" clearable :type="type" :placeholder="placeholder" size="default"></el-date-picker>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field readonly right-icon="arrow" clickable name="datetimePicker" :model-value="_value" :placeholder="placeholder" @click="showPicker = true"/>
      <popup v-model:show="showPicker" position="bottom" >
        <picker-group :title="desc" :tabs="['选择日期', '选择时间']" @confirm="onConfirm">
          <date-picker :formatter="formatter" v-model="currentDate"/>
          <time-picker :formatter="formatter" v-model="currentTime" />
        </picker-group>
      </popup>
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script>
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import { Field, Popup, DatePicker, TimePicker, PickerGroup } from 'vant'
import { computed, reactive, toRefs } from 'vue'
import { isNotEmpty } from '/@/utils/utils'
import moment from 'moment'

export default {
    name: 'DateTime',
    mixins: [componentMinxins],
    components: { Field, Popup, DatePicker, TimePicker, PickerGroup },
    props: {
        modelValue: {
            default: null,
        },
        format: {
            type: String,
            default: 'YYYY-MM-DD HH:mm',
        },
        placeholder: {
            type: String,
            default: '请选择日期时间',
        },
    },
    setup(props) {
        const { format, modelValue } = toRefs(props)
        const state = reactive({
            showPicker: false,
            currentDate: [],
            currentTime: []
        })
        const type = computed(() => {
            switch (format.value) {
                case 'YYYY':
                    return 'year'
                case 'YYYY-MM':
                    return 'month'
                case 'YYYY-MM-DD':
                    return 'date'
                case 'YYYY-MM-DD HH:mm':
                    return 'datetime'
                default:
                    return 'datetime'
            }
        })
        const desc = computed(() => {
            switch (format.value) {
                case 'YYYY':
                    return '选择年份'
                case 'YYYY-MM':
                    return '选择年-月'
                case 'YYYY-MM-DD':
                    return '选择年-月-日'
                case 'YYYY-MM-DD HH:mm':
                    return '选择年-月-日 时:分'
                default:
                    return '选择年-月-日 时:分'
            }
        })
        const timeVal = computed({
            get: () => {
                if (isNotEmpty(modelValue.value)) {
                    return moment(modelValue.value)
                } else {
                    return new Date()
                }
            },
            set(val) {
                context.emit('update:modelValue', getFormatVal(val))
            }
        })
        const onConfirm = (val) => {
            state.showPicker = false
            _value.value = getFormatVal(val)
            console.log( _value.value, `${val[0].selectedValues.join('-')} ${val[1].selectedValues.join(':')}`)
        }
        const getFormatVal = (val) => {
            return `${val[0].selectedValues.join('-')} ${val[1].selectedValues.join(':')}`
        }
        const formatter = (type, option) => {
            switch (type){
                case 'year': option.text += ' 年'; break;
                case 'month': option.text += ' 月'; break;
                case 'day': option.text += ' 日'; break;
                case 'hour': option.text += ' 时'; break;
                case 'minute': option.text += ' 分'; break;
            }
            return option
        }
        const filter = (type, option) => {
            /*if (type === 'minute') {
                return options.filter((option) => option % 5 === 0);
            }*/
            return options
        }
        return {
            ...toRefs(state),
            type,
            desc,
            timeVal,
            onConfirm,
            formatter,
            filter
        }
    }
}
</script>

<style>

</style>